<template>
  <page-header-wrapper>
    <a-card>
      <a-descriptions>
        <template #title><a>配资信息</a></template>
        <a-descriptions-item
          label="配资合同编号"
        ><span>{{ contractDtl.netsignContractNo }}</span>
          <span class="handleBtns">
            <span>{{ netSignStatusMap[netSignInfo.status] }}</span
            >&ensp; <a @click="_syncNetSignStatus">同步</a>&ensp;
            <span v-if="netSignInfo.previewUrl"> <a target="_blank" :href="netSignInfo.previewUrl">查看</a>&ensp;</span>
            <a @click="_downLoadFile">存证</a>&ensp;
            <a @click="_appendContract" v-if="btnsPurviewData.append.isShow">追加合同</a>&ensp;
            <a @click="_divideAccounts" v-if="btnsPurviewData.allocate.isShow">手动分账</a>&ensp;
            <a
              @click="_markServiceFee"
              v-if="contractDtl.contractStatus === 1 && btnsPurviewData.mark.isShow"
            >标记支付服务费</a
            >
          </span></a-descriptions-item
        >
      </a-descriptions>
      <a-descriptions :column="{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
        <a-descriptions-item label="商户">{{ contractDtl.merchantName }}</a-descriptions-item>
        <a-descriptions-item label="配资服务商">{{ contractDtl.capitalName }}</a-descriptions-item>
        <a-descriptions-item label="配资金额">{{ contractDtl.loanAmount }}元</a-descriptions-item>
        <a-descriptions-item label="月回款金额">{{ contractDtl.monthRepaymentAmount }}元</a-descriptions-item>
        <a-descriptions-item label="服务费金额">{{ contractDtl.serviceFeeAmount }}元</a-descriptions-item>
        <a-descriptions-item label="还款日">{{ contractDtl.repaymentDay }}日</a-descriptions-item>
        <a-descriptions-item label="服务费支付状态">{{
          contractStatusMap[contractDtl.contractStatus]
        }}</a-descriptions-item>
        <a-descriptions-item label="商户回款状态">{{
          contractDtl.isUnfreeze === 1 ? '解冻' : '冻结'
        }}</a-descriptions-item>
      </a-descriptions>
      <a-descriptions :column="{ xxl: 1, xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }">
        <a-descriptions-item label="图片">
          <img
            class="contractImg"
            :src="item"
            v-for="item in contractDtl.picsList"
            :key="item"
            @click="_previewImg(item)"
          />
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions :column="{ xxl: 4, xl: 6, lg: 6, md: 6, sm: 3, xs: 1 }">
        <a-descriptions-item label="合同数">{{ contractDtl.contractNums }}个</a-descriptions-item>
        <a-descriptions-item label="合同金额">{{ contractDtl.contractAmount }}元</a-descriptions-item>
        <a-descriptions-item label="已到回款">{{ contractDtl.repaymentAmount }}元</a-descriptions-item>
        <a-descriptions-item label="标记金额">{{ contractDtl.contractMarkPayAmount }}元</a-descriptions-item>
        <a-descriptions-item
          label="未到金额"
        >{{ contractDtl.contractAmount - contractDtl.repaymentAmount }}元</a-descriptions-item
        >
        <a-descriptions-item label="待分金额">{{ contractDtl.contractAllocateAmount }}元</a-descriptions-item>
      </a-descriptions>
      <a-divider></a-divider>
      <a-descriptions>
        <template #title><a>合同列表</a></template>
        <a-descriptions-item>
          <a-table row-key="contractNo" :columns="columns" :data-source="contractDtl.contractList">
            <span slot="serial" slot-scope="text, record, index">
              {{ index + 1 }}
            </span>
            <div slot="userInfo" slot-scope="text, record">
              <div>
                <span>{{ record.userName }}</span
                >&nbsp;&nbsp;<span>{{ record.userMobile }}</span>
              </div>
              <div>{{ record.userNetsignAccount }}</div>
            </div>
            <div slot="amountInfo" slot-scope="text, record">
              <div>
                <span>{{ record.depositAmount }}</span
                >/<span>{{ record.contractAmount }}</span>
              </div>
              <div>
                <span>已还{{ record.repaymentNums }}期</span>/<span>共{{ record.repaymentCycle }}期</span>
              </div>
            </div>
            <span slot="serviceFeeAmount" slot-scope="text, record">
              <span>{{
                text ? `${text}/${((record.serviceFeeAmount * 100) / record.contractAmount).toFixed(2)}` : '—'
              }}</span>
            </span>
            <span slot="repaymentDay" slot-scope="text">
              <span>{{ text | repaymentDayFilter }}</span>
            </span>
            <span slot="serviceFeePayStatus" slot-scope="text">
              <span>{{ text | serviceFeePayStatusFilter }}</span>
            </span>
            <span slot="repaymentStatus" slot-scope="text">
              <span>{{ text | repaymentStatusFilter }}</span>
            </span>
            <span slot="capitalContractStatus" slot-scope="text">
              <span>{{ text | capitalContractStatusFilter }}</span>
            </span>
          </a-table>
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions>
        <template #title><a>分账记录</a></template>
        <a-descriptions-item>
          <a-table row-key="handleUserId" :columns="columns1" :data-source="contractDtl.allocateList">
            <span slot="serial" slot-scope="text, record, index">
              {{ index + 1 }}
            </span>
            <span slot="allocateStatus" slot-scope="text">
              <span>{{ text | allocateStatusFilter }}</span>
            </span>
          </a-table>
        </a-descriptions-item>
      </a-descriptions>
      <create-mark-form
        ref="createMarkForm"
        :visible="markVisible"
        :loading="confirmLoading"
        :model="mdl"
        @cancel="handleMarkCancel"
        @ok="_submitMark"
      />
      <create-form
        ref="createForm"
        :visible="visible"
        :loading="confirmLoading"
        :model="mdl"
        @cancel="handleCancel"
        @ok="handleSubmit"
      />
      <create-divide-form
        ref="createDivideForm"
        :visible="divideVisible"
        :loading="confirmLoading"
        :model="mdl"
        @cancel="handleDivideCancel"
        @ok="_submitDivide"
      />
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { BTNS_PURVIEW_MAP } from '@/store/mutation-types'
import storage from 'store'
import { getNetSignInfo } from '@/api/common'
import { STable, Ellipsis } from '@/components'
import { syncNetSignStatus, downloadNetSignWithCert } from '@/api/custContractManage'
import {
  getMerchantContractDtl,
  serviceFeeMarkPay,
  appendMerchantContract,
  allocate
} from '@/api/merchantContractManage'
import CreateMarkForm from '../modules/CreateMarkServiceFeeForm.vue'
import CreateForm from '../modules/CreateAppendContractForm.vue'
import CreateDivideForm from '../modules/CreateDivideAccountsForm.vue'
const netSignStatusMap = {
  0: '等待签约',
  1: '签约中',
  2: '已签约',
  3: '过期',
  4: '拒签',
  6: '作废',
  '-2': '状态异常'
}

const contractStatusMap = {
  1: '服务费待支付',
  2: '还款中',
  3: '已完结'
}

const statusMap = {
  1: {
    status: 'processing',
    text: '启用'
  },
  2: {
    status: 'default',
    text: '冻结'
  }
}

const serviceFeePayStatusMap = {
  0: {
    text: '未支付'
  },
  1: {
    text: '已支付'
  }
}

const repaymentStatusMap = {
  1: {
    text: '正常'
  },
  2: {
    text: '逾期'
  },
  3: {
    text: '结清'
  }
}

const capitalContractStatusMap = {
  0: {
    text: '未打包'
  },
  1: {
    text: '已打包'
  },
  2: {
    text: '已结清'
  },
  4: {
    text: '已冻结'
  }
}

const repaymentDayMap = {
  1: {
    text: '次月今日'
  },
  2: {
    text: '次月5日'
  },
  3: {
    text: '次月15日'
  },
  4: {
    text: '次月25日'
  },
  5: {
    text: '一周后'
  },
  6: {
    text: '本月月底'
  }
}

const allocateStatusMap = {
  1: {
    text: '成功'
  },
  2: {
    text: '部分分账'
  },
  3: {
    text: '失败'
  }
}

const columns = [
  {
    title: '序号',
    scopedSlots: { customRender: 'serial' },
    align: 'center',
    fixed: 'left',
    width: 80
  },
  {
    title: '合同编号',
    dataIndex: 'contractNo',
    customRender: (text) => text || '—',
    align: 'center'
  },
  {
    title: '签约人信息',
    scopedSlots: { customRender: 'userInfo' },
    align: 'center'
  },
  {
    title: '签约时间',
    dataIndex: 'netsignCompleteTime',
    customRender: (text) => text || '—',
    align: 'center'
  },
  {
    title: '定金/金额',
    dataIndex: 'amountInfo',
    scopedSlots: { customRender: 'amountInfo' },
    align: 'center'
  }
]

const columns1 = [
  {
    title: '序号',
    scopedSlots: { customRender: 'serial' },
    align: 'center',
    fixed: 'left',
    width: 80
  },
  {
    title: '分账人',
    dataIndex: 'handleeUserName',
    customRender: (text) => text || '—',
    align: 'center'
  },
  {
    title: '分账时间',
    dataIndex: 'createTime',
    customRender: (text) => text || '—',
    align: 'center'
  },
  {
    title: '待分账金额',
    dataIndex: 'allocateAmount',
    customRender: (text) => text || '—',
    align: 'center'
  },
  {
    title: '资方金额',
    dataIndex: 'capitalAllocateAmount',
    customRender: (text) => text || '—',
    align: 'center'
  },
  {
    title: '资方成功金额',
    dataIndex: 'capitalAllocateSuccessAmount',
    customRender: (text) => text || '—',
    align: 'center'
  },
  {
    title: '分账状态',
    dataIndex: 'allocateStatus',
    scopedSlots: { customRender: 'allocateStatus' },
    align: 'center'
  }
]

export default {
  components: {
    STable,
    Ellipsis,
    CreateMarkForm,
    CreateForm,
    CreateDivideForm
  },
  props: {},
  data () {
    this.columns = columns
    this.columns1 = columns1
    this.netSignStatusMap = netSignStatusMap
    this.contractStatusMap = contractStatusMap
    return {
      btnsPurviewMap: storage.get(BTNS_PURVIEW_MAP),
      btnsPurviewData: {},
      contractNo: '',
      queryParam: {},
      contractDtl: {},
      netSignInfo: {},
      mdl: null,
      divideVisible: false,
      markVisible: false,
      visible: false,
      confirmLoading: false
    }
  },
  methods: {
    /**
     * 预览图片
     */
    _previewImg (imgurl) {
      this.$hevueImgPreview(imgurl)
    },
    /**
     * 追加合同
     */
    _appendContract () {
      const form = this.$refs.createForm.form
      form.resetFields()
      this.mdl = null
      this.visible = true
      this.mdl = { contractNo: this.contractDtl.contractNo, contractList: this.contractDtl.contractList }
    },
    /**
     * 标记服务费
     */
    _markServiceFee () {
      const form = this.$refs.createMarkForm.form
      form.resetFields()
      this.mdl = null
      this.markVisible = true
      this.mdl = { contractNo: this.contractDtl.contractNo }
    },
    /**
     * 手动分账
     */
    _divideAccounts () {
      const form = this.$refs.createDivideForm.form
      form.resetFields()
      this.mdl = null
      this.divideVisible = true
      this.mdl = { contractNo: this.contractDtl.contractNo }
    },
    /**
     * 下载存证
     */
    _downLoadFile () {
      this.$loading.show()
      downloadNetSignWithCert({ contractNo: this.contractDtl.netsignContractNo }, () => {
        this.$loading.hide()
      })
    },
    /**
     * 同步签约状态
     */
    _syncNetSignStatus (record) {
      syncNetSignStatus({ contractNo: this.contractDtl.netsignContractNo })
        .then(() => {
          this.$message.info('同步成功')
        })
        .catch(() => {})
    },

    /**
     * 提交标记支付服务费
     */
    _submitMark: function () {
      const form = this.$refs.createMarkForm.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          if (values.contractNo) {
            serviceFeeMarkPay({ ...values })
              .then((res) => {
                this.confirmLoading = false
                this.markVisible = false
                this.$message.info('标记成功')
                this.getContractData()
              })
              .catch((e) => {
                this.confirmLoading = false
              })
          }
        } else {
          this.confirmLoading = false
        }
      })
    },
    /**
     * 提交手动分账
     */
    _submitDivide (opts) {
      const form = this.$refs.createDivideForm.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          if (values.contractNo) {
            console.log(values)
            allocate({ ...values })
              .then((res) => {
                this.confirmLoading = false
                this.divideVisible = false
                this.$message.info('分账成功')
                this.getContractData()
              })
              .catch((e) => {
                this.confirmLoading = false
              })
          }
        } else {
          this.confirmLoading = false
        }
      })
    },
    /**
     * 提交追加合同
     */
    handleSubmit (opts) {
      const form = this.$refs.createForm.form
      this.confirmLoading = true
      const contractList = opts.contractList.map((item) => {
        return {
          contractNo: item
        }
      })
      form.validateFields((errors, values) => {
        if (!errors) {
          if (values.contractNo) {
            appendMerchantContract({ ...values, contractList })
              .then((res) => {
                this.confirmLoading = false
                this.visible = false
                this.$message.info('追加成功')
                this.getContractData()
              })
              .catch((e) => {
                this.confirmLoading = false
              })
          }
        } else {
          this.confirmLoading = false
        }
      })
    },
    /**
     * 取消标记支付服务费
     */
    handleMarkCancel () {
      this.markVisible = false
    },
    /**
     * 取消追加合同
     */
    handleCancel () {
      this.visible = false
    },
    /**
     * 取消手动分账
     */
    handleDivideCancel () {
      this.divideVisible = false
    },
    /**
     * 获取合同详情
     */
    getContractData () {
      getMerchantContractDtl({ contractNo: this.contractNo })
        .then((res) => {
          this.contractDtl = res.result
          this.contractDtl.picsList = this.contractDtl.pics.split(',')
          getNetSignInfo({
            contractNo: this.contractDtl.netsignContractNo
          })
            .then((res) => {
              this.netSignInfo = res.result
            })
            .catch((e) => {})
        })
        .catch((e) => {})
    }
  },
  filters: {
    statusFilter (type) {
      return statusMap[type].text
    },
    statusTypeFilter (type) {
      return statusMap[type].status
    },
    serviceFeePayStatusFilter (type) {
      return serviceFeePayStatusMap[type].text
    },
    repaymentStatusFilter (type) {
      return repaymentStatusMap[type].text
    },
    capitalContractStatusFilter (type) {
      return capitalContractStatusMap[type].text
    },
    repaymentDayFilter (type) {
      return repaymentDayMap[type].text
    },
    allocateStatusFilter (type) {
      console.log(type, 'type')
      return allocateStatusMap[type].text
    }
  },
  created () {
    const { contractNo } = this.$route.params
    this.contractNo = contractNo
    this.getContractData()
  },
  mounted () {}
}
</script>
<style lang="less" scope>
.tableTitle {
  padding: 0 0 20px;
}
.contractNo {
  display: inline;
  width: 200px;
}
.handleBtns {
  padding: 0 20px;
}
.contractImg {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  cursor: pointer;
}
</style>
